<template>
  <div class="like-collect-section">
    <div class="action-buttons">
      <!-- 点赞按钮 -->
      <el-button
        :type="isLiked ? 'primary' : 'default'"
        :icon="Top"
        @click="handleLike"
        :loading="likeLoading"
        class="action-btn"
      >
        <span class="btn-text">{{ likeCount }} 点赞</span>
      </el-button>

      <!-- 收藏按钮 -->
      <el-button
        :type="isCollected ? 'warning' : 'default'"
        :icon="Star"
        @click="handleCollect"
        :loading="collectLoading"
        class="action-btn"
      >
        <span class="btn-text">{{ collectCount }} 收藏</span>
      </el-button>
    </div>

    <!-- 统计信息 -->
    <div class="stats-info">
      <span class="stat-item">
        <el-icon><View /></el-icon>
        {{ viewCount }} 阅读
      </span>
      <span class="stat-item">
        <el-icon><ChatDotRound /></el-icon>
        {{ commentCount }} 评论
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Top, Star, View, ChatDotRound } from '@element-plus/icons-vue'
import { 
  likeBlog, 
  unlikeBlog, 
  collectBlog, 
  uncollectBlog, 
  getLikeStatus, 
  getCollectStatus 
} from '@/api/blog'
import { useUserStore } from '@/stores/userInfo'

const props = defineProps({
  blogId: {
    type: [String, Number],
    required: true
  },
  initialLikeCount: {
    type: Number,
    default: 0
  },
  initialCollectCount: {
    type: Number,
    default: 0
  },
  viewCount: {
    type: Number,
    default: 0
  },
  commentCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['like-updated', 'collect-updated'])

const userStore = useUserStore()
const currentUserId = userStore.userInfo?.id

// 状态数据
const likeCount = ref(props.initialLikeCount)
const collectCount = ref(props.initialCollectCount)
const isLiked = ref(false)
const isCollected = ref(false)
const likeLoading = ref(false)
const collectLoading = ref(false)

// 获取点赞状态
const loadLikeStatus = async () => {
  if (!currentUserId) return
  
  try {
    const res = await getLikeStatus(props.blogId)
    if (res.success) {
      isLiked.value = res.data.isLiked || false
    }
  } catch (error) {
    console.error('获取点赞状态失败:', error)
  }
}

// 获取收藏状态
const loadCollectStatus = async () => {
  if (!currentUserId) return
  
  try {
    const res = await getCollectStatus(props.blogId)
    if (res.success) {
      isCollected.value = res.data.isCollected || false
    }
  } catch (error) {
    console.error('获取收藏状态失败:', error)
  }
}

// 处理点赞
const handleLike = async () => {
  if (!currentUserId) {
    ElMessage.warning('请先登录')
    return
  }

  try {
    likeLoading.value = true
    
    if (isLiked.value) {
      // 取消点赞
      const res = await unlikeBlog({ blogId: props.blogId })
      if (res.success) {
        isLiked.value = false
        likeCount.value = Math.max(0, likeCount.value - 1)
        ElMessage.success('取消点赞成功')
        emit('like-updated', { isLiked: false, count: likeCount.value })
      }
    } else {
      // 点赞
      const res = await likeBlog({ blogId: props.blogId })
      if (res.success) {
        isLiked.value = true
        likeCount.value++
        ElMessage.success('点赞成功')
        emit('like-updated', { isLiked: true, count: likeCount.value })
      }
    }
  } catch (error) {
    ElMessage.error(isLiked.value ? '取消点赞失败' : '点赞失败')
  } finally {
    likeLoading.value = false
  }
}

// 处理收藏
const handleCollect = async () => {
  if (!currentUserId) {
    ElMessage.warning('请先登录')
    return
  }

  try {
    collectLoading.value = true
    
    if (isCollected.value) {
      // 取消收藏
      const res = await uncollectBlog({ blogId: props.blogId })
      if (res.success) {
        isCollected.value = false
        collectCount.value = Math.max(0, collectCount.value - 1)
        ElMessage.success('取消收藏成功')
        emit('collect-updated', { isCollected: false, count: collectCount.value })
      }
    } else {
      // 收藏
      const res = await collectBlog({ blogId: props.blogId })
      if (res.success) {
        isCollected.value = true
        collectCount.value++
        ElMessage.success('收藏成功')
        emit('collect-updated', { isCollected: true, count: collectCount.value })
      }
    }
  } catch (error) {
    ElMessage.error(isCollected.value ? '取消收藏失败' : '收藏失败')
  } finally {
    collectLoading.value = false
  }
}

// 更新统计数据
const updateStats = (newLikeCount, newCollectCount) => {
  likeCount.value = newLikeCount
  collectCount.value = newCollectCount
}

// 暴露方法给父组件
defineExpose({
  updateStats,
  loadLikeStatus,
  loadCollectStatus
})

onMounted(() => {
  loadLikeStatus()
  loadCollectStatus()
})
</script>

<style scoped>
.like-collect-section {
  margin: 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-text {
  font-weight: 500;
}

.stats-info {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-item .el-icon {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .stats-info {
    flex-direction: column;
    gap: 10px;
  }
}
</style> 